import React, { FC,useState} from 'react';
import { Text, View,Button,Image, usePageEvent,getStorage,withPageLifecycle,showToast, setStorage  } from '@ray-js/ray';
import styles from './index.module.less';
import ball from '../../assets/images/tab/ball.png';
import warning from '../../assets/images/tab/warning.png';
import {sp_contact_msg_code} from '@/constant/dpCodes';
import { useActions, useProps,utils } from '@ray-js/panel-sdk';

type Props = {
  Name:string;
  userName:string;
  onClose?:()=>void;
  onConfirm?:(value:string)=>void;
  MySend:boolean;
  OtherSend:boolean;
  esn:string;
  distance:number;
  myballname:string;
  myusername:string;
};
const SendPopup: FC<Props> = ({ 
    distance,
    esn,
    MySend,
    OtherSend,
    Name,
    userName,
    myballname,
    myusername,
    onClose,
    onConfirm,
}) => {
    const [is_active1,setis_active1]=useState(false);
    const [is_active2,setis_active2]=useState(false);
    const [is_active3,setis_active3]=useState(false);
    const [msg,setmsg]=useState('');

    const [SendActive,setSendActive]=useState(false);
    const send1=()=>{
      setis_active1(true);
      setis_active2(false);
      setis_active3(false);
      setSendActive(true);
      setmsg('Hi\u00A0你好');
    }

    const send2=()=>{
      setis_active1(false);
      setis_active2(true);
      setis_active3(false);
      setSendActive(true);
      setmsg('把球球举高高，让我看看你在哪');
    }

    const send3=()=>{
      setis_active1(false);
      setis_active2(false);
      setis_active3(true);
      setSendActive(true);
      setmsg('我想找你玩儿');
    }

    const close=()=>{
      onClose();
    }

    const actions = useActions();
    const { stringifyJSON } = utils;
    const send=()=>{
      getStorage({
        key:'Myesn',
        success(res){
          if(MySend)
            {
              if(true || OtherSend)        //对方回复了
              {
                const Send=stringifyJSON({rsn:esn,msg,ssn:res.data,sun:myusername,sdn:myballname});
                // const Send=stringifyJSON({rsn:esn,msg,sdn:res.data,sun:myusername});
                console.log('结果')
                console.log('Send',Send);
                actions[sp_contact_msg_code].set(Send);
                getStorage({
                  key:esn,
                  success(res){
                    setStorage({
                      key:esn,
                      data:{
                        ...res.data,
                        MeetMySend:true
                      }
                    })
                  }
                })
                console.log('对方回复了，继续发送');
              }
              else{               //对方未回复
                //发送失败
                showToast({ 
                  title:'发送失败',
                  mask:true,
                 })
                console.log('对方未回复，发送失败');
              }
            }
            else{                 //第一次发送
              const Send=stringifyJSON({rsn:esn,msg,ssn:res.data,sun:myusername,sdn:myballname});
              // const Send=stringifyJSON({rsn:esn,msg,sdn:res.data,sun:myusername});
              actions[sp_contact_msg_code].set(Send);
              console.log('第一次发送');
              getStorage({
                key:esn,
                success(res){
                  setStorage({
                    key:esn,
                    data:{
                      ...res.data,
                      MySend:true,
                      MeetMySend:true
                    }
                  })
                }
              })
            }
            onClose();
        }
      })
      
    }

    const nosend=()=>{        //没选择信息不给发送

    }

    return (
        <>
          <View className={styles.container}>

            <View className={styles.send_font}>发送信息</View>
            <Button className={styles.close} onClick={close}>x</Button>

            <Image src={ball} className={styles.ball} />

            <Text className={styles.name}>{userName}的{Name}</Text>

            <Text className={styles.distant_font}>TA距离你约{distance}米,发个消息偶遇吧</Text>


            <Button className={`${styles.send1} ${is_active1 ? styles.is_active1 : ''}`} onClick={send1}>Hi\u00A0你好</Button>
            <Button className={`${styles.send2} ${is_active2 ? styles.is_active2 : ''}`} onClick={send2}>把球球举高高，让我看看你在哪</Button>
            <Button className={`${styles.send3} ${is_active3 ? styles.is_active3 : ''}`} onClick={send3}>我想找你玩儿</Button>

            <Text className={styles.warning_font}>对方回复前，只能发送一条信息</Text>

            <Button className={SendActive?styles.send_btn_active:styles.send_btn} onClick={SendActive?send:nosend}>发送</Button>
        </View>


          <View className={styles.mask}/>
        </>
      );
}

export default SendPopup;


